<clr-main-container>
    <global-message [isAppLevel]="true"></global-message>
    <navigator (showDialogModalAction)="openModal($event)"></navigator>
    <search-result></search-result>
    <div class="login-wrapper"
         [ngStyle]="{'background-image': customLoginBgImg? 'url(/images/' + customLoginBgImg + ')': ''}">
        <form #signInForm="ngForm" class="login">
                <span *ngIf="isOidcLoginMode && steps===2" (click)="steps=1" class="back-icon">
                <clr-icon shape="angle left"></clr-icon>
                <div class="margin-left-3">{{'SEARCH.BACK' | translate }}</div>
            </span>
            <label class="title"> {{customAppTitle ? customAppTitle : (appTitle | translate)}}
            </label>
            <div class="login-group">
                <ng-container *ngIf="isOidcLoginMode && steps ===1">
                    <a href="/c/oidc/login">
                        <button type="button" id="log_oidc" class="btn btn-primary btn-block">
                            <span>{{'BUTTON.LOG_IN_OIDC' | translate }}</span>
                        </button>
                    </a>
                    <div class="divider-container mt-1 mb-1">
                        <hr class="divider" size="1" noshade/>
                        <h4 class="m-0"><span>{{'SIGN_IN.OR' | translate }}</span></h4>
                        <hr class="divider" size="1" noshade/>
                    </div>
                    <a href="javascript:void(0)" (click)="steps=2">
                        <button type="button" id="login-db" class="btn btn-primary btn-block mt-0">
                            <span>{{'SIGN_IN.VIA_LOCAL_DB' | translate }}</span>
                        </button>
                    </a>
                </ng-container>
                <ng-container  *ngIf="(!isOidcLoginMode && steps === 1) || (isOidcLoginMode && steps ===2)">
                    <clr-input-container class="mt-3">
                        <input clrInput class="username" type="text" required [(ngModel)]="signInCredential.principal"
                               name="login_username" id="login_username"
                               placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}' #userNameInput='ngModel'>
                        <clr-control-error>{{ 'TOOLTIP.SIGN_IN_USERNAME' | translate }}</clr-control-error>
                    </clr-input-container>
                    <div class="clr-form-control">
                        <div class="clr-control-container"
                             [class.clr-error]="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)">
                            <div class="clr-input-wrapper">
                                <input class="clr-input pwd-input" [type]="showPwd?'text':'password'" required
                                       [(ngModel)]="signInCredential.password" name="login_password" id="login_password"
                                       placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}' #passwordInput="ngModel">
                                <clr-icon *ngIf="!showPwd" shape="eye" class="pw-eye"
                                          (click)="showPwd =!showPwd"></clr-icon>
                                <clr-icon *ngIf="showPwd" shape="eye-hide" class="pw-eye"
                                          (click)="showPwd =!showPwd"></clr-icon>
                                <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                            </div>
                            <clr-control-error
                                    *ngIf="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)">
                                {{ 'TOOLTIP.SIGN_IN_PWD' | translate }}
                            </clr-control-error>
                        </div>
                    </div>
                    <div class="display-flex">
                        <clr-checkbox-wrapper>
                            <input clrCheckbox type="checkbox" id="rememberme" #rememberMeBox
                                   (click)="clickRememberMe($event)" [checked]="rememberMe">
                            <label class="reset-label" for="rememberme">{{ 'SIGN_IN.REMEMBER' | translate }}</label>
                        </clr-checkbox-wrapper>
                    </div>
                    <div *ngIf="isError" class="error active">
                        <span *ngIf="isCoreServiceAvailable">{{ 'SIGN_IN.INVALID_MSG' | translate }}</span>
                        <span *ngIf="!isCoreServiceAvailable">{{ 'SIGN_IN.CORE_SERVICE_NOT_AVAILABLE' | translate }}</span>
                    </div>
                    <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary mt-2" (click)="signIn()"
                            id="log_in">{{ 'BUTTON.LOG_IN' | translate }}</button>
                    <a href="javascript:void(0)" class="signup" (click)="signUp()"
                       *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
                </ng-container>
                <div class="more-info" [ngClass]="{'pt-1': (!isOidcLoginMode && steps === 1) || (isOidcLoginMode && steps ===2)}">
                    <a href="https://github.com/goharbor/harbor" target="_blank">{{ 'BUTTON.MORE_INFO' | translate }}</a>
                </div>
            </div>
        </form>
    </div>
</clr-main-container>
<sign-up #signupDialog (userCreation)="handleUserCreation($event)"></sign-up>
<about-dialog></about-dialog>
